<template>
	
	<!-- 点击寄养，页面 -->
	<view>
		<pet-item></pet-item>
	</view>
	<text>
		注：每日寄养费用100元
	</text>
	<view class="content">
		<uni-badge text="1"></uni-badge>
		<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
	</view>
	<view class="foot">
		<view class="right">
			<text class="count">金额：{num}</text>
			<button>确认</button>
		</view>
	</view>
</template>

<script >
import PetItem from '@/components/pets/pet-item.vue';
import uniBadge from "../../../uni-datetime-picker_2.2.11/components/uni-datetime-picker/uni-datetime-picker.vue"  
export default {  
    data() {  
        return { /* ... */ }  
    },  
    components: {  
        uniBadge ,PetItem 
    }  
}
</script>

<style scoped>
	.content{
		width:750rpx ;
		border: 1px solid gray;
		border-radius: 20rpx;
		margin-top: 30rpx;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	}
	.foot{
		width:750rpx ;
		border: 1px solid gray;
		border-radius: 20rpx;
		position: absolute;
		bottom: 0px;
		/* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */
	}
	.right{
		float: right;
		width: 400rpx;
		display: flex;
		justify-content: space-between;
	}
	text{
		line-height: 96rpx;
	}
	button{
		font-weight: 600;
		font-size: 18px;
		width: 128rpx;
		height: 85rpx;
		background-color: gainsboro;
		color: red;
		border-radius: 18rpx;
		margin-top: 4rpx;
	}
	
</style>
